<template>
  <div class="card">
    <a-select :allowClear="true" class="inputStyle" v-model="formData.search.position_id" placeholder="请选择类型">
      <a-select-option v-for="item in option" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
    </a-select>
    <a-button class="btnStyle" type="primary" @click="getList">查询</a-button>
    <a-button class="btnStyle" @click="reset()">重置</a-button>
    <a-button class="btnStyle" type="primary" @click="add">新增</a-button>
    <a-button class="btnStyle" type="primary" @click="sync">同步品牌</a-button>
    <a-table
      :rowKey="(record, index) => index"
      bordered
      :pagination="{
        pageSize: formData.page_size,
        pageSizeOptions: ['20', '30', '40', '50'],
        size: 'small',
        showSizeChanger: true,
        showQuickJumper: true,
        total: total,
        current: formData.page,
        showTotal: total => `共 ${total} 条`
      }"
      @change="paginChange"
      style="margin-top: 10px; border: 1px solid #e8e8e8"
      show-size-changer
      show-quick-jumper
      :loading="loading"
      :data-source="tableData"
      :columns="columns"
    >
      <div slot="content" slot-scope="text, record">
        <p v-html="record.content"></p>
      </div>
      <div class="btn" slot="operate" slot-scope="text, record">
        <span class="linkStyle" @click="edit(record)">修改</span>
        <span class="linkStyle" style="color: red" @click="del(record.id)">删除</span>
      </div>
    </a-table>
    <a-modal width="40%" v-model="isShowAdd" :title="title" @ok="handleOk">
      <a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 14 }">
        <a-form-item label="类型">
          <a-select
            style="width: 100%"
            v-model="addForm.position_id"
            :allowClear="true"
            class="inputStyle"
            placeholder="请选择类型"
            :disabled="isDisable"
          >
            <a-select-option v-for="item in option" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="内容">
          <quills :contents.sync="addForm.content"></quills>
        </a-form-item>
      </a-form>
    </a-modal>
    <a-modal v-model="isShowSync" title="同步品牌" @ok="onOk">
      <a-form-model
        ref="formRef"
        :model="brandForm"
        :rules="brandFormRule"
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 14 }"
      >
        <a-form-model-item label="品牌" prop="target_brand_id">
          <a-select v-model="brandForm.target_brand_id" mode="multiple" placeholder="请选择品牌" style="width: 100%">
            <a-select-option v-for="item in brandOption" :key="item.id" :value="item.id">{{
              item.name
            }}</a-select-option>
          </a-select>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import {
  getPromptTypeAPI,
  getPromptListAPI,
  addPromptListAPI,
  delPromptListAPI,
  editPromptListAPI,
  brandTypeAPI,
  brandSyncAPI
} from '@/api/product.js'
export default {
  name: 'promptManage',
  data() {
    return {
      brandForm: {
        brand_id: process.env.VUE_APP_BRAND_ID,
        target_brand_id: undefined
      },
      brandFormRule: { target_brand_id: [{ required: true, message: '请选择品牌' }] },
      brandOption: [],
      isShowSync: false,
      isDisable: false,
      addForm: {
        brand_id: process.env.VUE_APP_BRAND_ID,
        content: '',
        ids: '',
        position_id: undefined
      },
      title: '新增',
      isShowAdd: false,
      total: 0,
      loading: false,
      option: [],
      formData: {
        brand_id: process.env.VUE_APP_BRAND_ID,
        page: 1,
        page_size: 50,
        search: {
          position_id: undefined
        }
      },
      columns: [
        {
          title: '#',
          dataIndex: 'id',
          width: '80px',
          align: 'center'
        },
        {
          title: '类型',
          dataIndex: 'position',
          width: '200px',
          align: 'center'
        },
        {
          title: '内容',
          dataIndex: 'content',
          scopedSlots: { customRender: 'content' },
          align: 'center'
        },
        {
          title: '操作',
          align: 'center',
          width: '150px',
          scopedSlots: { customRender: 'operate' }
        }
      ],
      tableData: []
    }
  },
  created() {
    this.getType()
    this.getList()
  },
  watch: {
    isShowAdd(boolean) {
      if (!boolean) {
        this.addForm = {
          brand_id: process.env.VUE_APP_BRAND_ID,
          content: '',
          ids: '',
          position_id: undefined
        }
        this.isDisable = true
      }
    }
  },
  methods: {
    reset() {
      this.formData = {
        brand_id: process.env.VUE_APP_BRAND_ID,
        page: 1,
        page_size: 50,
        search: {
          position_id: undefined
        }
      }
      this.getList()
    },
    async getType() {
      const { data } = await getPromptTypeAPI()
      this.option = data
    },
    async getList() {
      try {
        this.loading = true
        const { data } = await getPromptListAPI(this.formData)
        this.tableData = data.list
        this.total = data.total
      } finally {
        this.loading = false
      }
    },
    paginChange(value) {
      console.log(value)
      this.formData.page = value.current
      this.formData.page_size = value.pageSize
      this.getList()
    },
    add() {
      this.title = '新增'
      this.isShowAdd = true
    },
    del(id) {
      this.$confirm({
        title: '确认删除吗?',
        content: h => <div style="color:red;">此操作不可撤回</div>,
        onOk: async () => {
          try {
            await delPromptListAPI({ brand_id: process.env.VUE_APP_BRAND_ID, ids: id })
            this.$message.success('操作成功')
            this.getList()
          } catch (error) {
            this.$message.error(error.data.msg)
          }
        },
        onCancel() {
          return
        },
        class: 'test'
      })
    },
    async handleOk() {
      try {
        if (this.title === '新增') {
          await addPromptListAPI(this.addForm)
        }
        if (this.title === '修改') {
          await editPromptListAPI(this.addForm)
        }
        this.getList()
        this.isShowAdd = false
        this.$message.success('操作成功')
      } catch (error) {
        this.$message.error(error.data.msg)
      }
    },
    edit(object) {
      this.isDisable = true
      this.title = '修改'
      this.addForm.position_id = object.position_id
      this.addForm.ids = object.id
      this.addForm.content = object.content
      this.isShowAdd = true
    },
    async sync() {
      const { data } = await brandTypeAPI()
      this.brandOption = data
      this.isShowSync = true
    },
    onOk() {
      this.$refs.formRef.validate(async valid => {
        if (!valid) return
        try {
          const result = await brandSyncAPI(this.brandForm)
          this.$message.success(result.msg)
          this.isShowSync = false
          this.getList()
        } catch (error) {
          this.$message.error(error.data.msg)
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.inputStyle {
  width: 200px;
  margin-right: 10px;
}
.btnStyle {
  margin-right: 10px;
}
.btn {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
/deep/.ant-form-item {
  margin: 0;
}
</style>
